<template>
    <view class="lightColour navTop">
        <van-nav-bar title="实名认证" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>
        <div class="line"></div>
        <van-cell-group>
            <van-field label="真实姓名" value="" placeholder="请输入真实姓名"/>
            <van-field label="证件类型" :value="zjType" placeholder="请输入证件类型" readonly icon="arrow" @tap="show = true"/>
            <van-field label="证件号码" value="" placeholder="请输入证件号码"/>
            <van-cell title="证件照片" use-label-slot title-class='cellTit' >
                <view slot="label" class="uni-padding-wrap uni-common-mt">
                    <view class="demo">
                        <view class="addfile" @click="chooseImage(0)">
                            <image v-if="imageSrcZm" :src="imageSrcZm" class="image" mode="scaleToFill"></image>
                            <view v-else class="addfileBg"></view>
                        </view>
                        <p>上传身份证正面照</p>
                    </view>
                    <view class="demo">
                        <view class="addfile" @click="chooseImage(1)">
                            <image v-if="imageSrcFm" :src="imageSrcFm" class="image" mode="scaleToFill"></image>
                            <view v-else class="addfileBg"></view>
                        </view>
                        <p>上传身份证反面照</p>
                    </view>
                </view>
            </van-cell>
        </van-cell-group>
        <div class="hit">
            
            照片要求：JPG/PNG格式，大小不超过5MB，信息清晰<br>
            <br>
            *以下错误将导致审核不通过：<br>
            1.证件过期或上传的证件信息模糊，<br>
            2.填写的证件号，姓名与实际信息不一致，<br>
            3.手持照缺用户名，用户名错误，用户名信息不洁晰或用户名非手写等。
                        
        </div>
        <div class="btnBox">
			<button class="primary" @click="login">提交</button>
		</div>

        <van-popup :show="show" position="bottom" @close="show=false">
			<van-picker show-toolbar :columns="columns" @cancel="show=false"  @confirm="onConfirm" />
		</van-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imageSrcZm:'',
            imageSrcFm:'',
            show:false,
            columns:['身份证', '驾驶证'],
            zjType : '',
        };
    },
    methods: {
        onClickLeft() {
            uni.navigateBack();
        },
        onConfirm(event){
            const { picker, value, index } = event.detail;
            this.zjType = value
            this.show = false
            console.log(this.value)
        },
        chooseImage(type) {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album'],
                success: (res) => {
                    console.log('chooseImage success, temp path is', res.tempFilePaths[0])
                    var imageSrc = res.tempFilePaths[0]
                    uni.uploadFile({
                        url: 'https://unidemo.dcloud.net.cn/upload',
                        filePath: imageSrc,
                        fileType: 'image',
                        name: 'data',
                        success: (res) => {
                            console.log('uploadImage success, res is:', res)
                            uni.showToast({
                                title: '上传成功',
                                icon: 'success',
                                duration: 1000
                            })
                            console.log(type)
                            if(type == 0){
                                this.imageSrcZm = imageSrc
                            }else{
                                this.imageSrcFm = imageSrc
                            }
                            
                        },
                        fail: (err) => {
                            console.log('uploadImage fail', err);
                            uni.showModal({
                                content: err.errMsg,
                                showCancel: false
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.log('chooseImage fail', err)
                }
            })
        }
    }
};
</script>

<style lang="less">

.image {
		width: 328upx;
        height: 197upx;
    }
.uni-padding-wrap{
    text-align: center;
    margin-top: 10upx;
    .demo{
        width: 328upx;
        display: inline-block;
        .addfile,.addfileBg{
            width: 328upx;
            height: 197upx;
            p{color: #6B6A6A;font-size: 22upx; margin-top: 10upx;}
        }
        &:nth-child(1){
            .addfileBg{
                background: url('~@/static/zm.png');
                background-size: 100% 100%;
            }
            margin-right: 34upx;
        }
        &:nth-child(2){
            .addfileBg{
                background: url('~@/static/fm.png');
                background-size: 100% 100%;
            }
        }
    }
}

.hit{
    font-size: 18upx;
    color: #7A7A7A;
    padding: 40upx 30upx;
    line-height: 32upx;
}
</style>
